<template>
	<view class="body">
		<view class="list">
			<view class="item" v-for="item in data" :key="item.qr_id">
				<view class="header"> 小龙 </view>
				<div class="h-line"></div>
				<view class="info" @click="goDetail">
					<view class="infoItem" style="width: 18%">
						<span>关注次数</span>
						<span class="value">{{ item.subscribe_num || 0 }} </span>
					</view>
					<div class="v-line"></div>
					<view class="infoItem" style="width: 21%">
						<div style="display: flex; align-items: center">
							<span>关注人数</span
							><Tooltip content="该渠道二维码下所有关注粉丝去重后的人数">
								<icon-question-circle />
							</Tooltip>
						</div>

						<span class="value"> {{ item.dist_subscribe_num || 0 }}</span>
					</view>
					<div class="v-line"></div>
					<view class="infoItem" style="width: 18%">
						<span>取关次数</span>
						<span class="value">{{ item.unsubscribe_num || 0 }} </span>
					</view>
					<div class="v-line"></div>
					<view class="infoItem" style="width: 21%">
						<div style="display: flex; align-items: center">
							<span>取关人数</span
							><Tooltip content="该渠道二维码下所有取关粉丝去重后的人数">
								<icon-question-circle />
							</Tooltip>
						</div>

						<span class="value">{{ item.dist_unsubscribe_num || 0 }} </span>
					</view>
					<div class="v-line"></div>
					<view class="infoItem" style="flex: 1.5">
						<div style="display: flex; align-items: center">
							<span>净关人数 </span>
							<Tooltip content="关注次数-取关次数" position="tr"><icon-question-circle /> </Tooltip>
						</div>

						<span class="value"> {{ item.plus_num || 0 }}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	import { Tooltip } from '@arco-design/web-vue'
	import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'
	import { useRoute, useRouter } from 'vue-router'

	document.title = '渠道二维码统计'

	const route = useRoute()
	const router = useRouter()

	const { query } = route

	const data = ref([
		{
			qr_id: '279634',
			qr_name: '小龙',
			subscribe_num: '0',
			unsubscribe_num: '0',
			dist_subscribe_num: 0,
			dist_unsubscribe_num: 0,
			plus_num: '0'
		}
	])

	const goDetail = () => {
		router.push({
			path: '/official/OfficialQrPublic/MobileStatisticDetailView',
			query
		})
	}

	const getData = async () => {
		const res = await $globalRequest(
			'/api/QD2selectAllnew',
			query || {
				s: '66bc5e80092b64123',
				t: '1723564800',
				et: '1725119999',
				year: '2024'
			},
			{ method: 'post' }
		)

		data.value = res || [
			{
				qr_id: '279634',
				qr_name: '小龙',
				subscribe_num: '0',
				unsubscribe_num: '0',
				dist_subscribe_num: 0,
				dist_unsubscribe_num: 0,
				plus_num: '0'
			}
		]
	}
	getData()
</script>
<style scoped lang="less">
	.body {
		width: 100vw;
		height: 100vh;
		overflow: auto;
		display: block;
		background-color: rgba(242, 244, 245, 1);
		padding-bottom: 20px;
		font-size: 1rem;
		.item {
			margin-top: 20px;
			color: #6e6e6e;
			padding: 17px;
			border-top: 1px solid #dadada;
			border-bottom: 1px solid #dadada;
			font-size: 14px;
			background-color: #fff;
			display: block;
			.h-line {
				margin: 10px 0 20px;
				height: 1px;
				background-color: rgba(218, 218, 218, 1);
			}
			.v-line {
				height: 40px;
				background-color: #dadada;
				background-color: rgba(218, 218, 218, 1);
				width: 1px;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.infoItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					line-height: 1.5;
					font-size: 12px;
					.value {
						color: rgba(127, 143, 239, 1);
					}
				}
			}
		}
	}
</style>
